<template>
  <page-view>
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <div>可以利用websockt发送心跳包，后端返回最新图片，达到实时播放的效果</div>
  </page-view>
</template>

<script>
// 利用canvas来实时播放画面 其实本质是隔一段时间就开始画图片
export default {
  name: "work-canvas-play",
  components: {},
  data() {
    return {
      ctx:null,
      canvasW:600,
      canvasH:400,

      imageList:[
          'https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3569419905,626536365&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3779234486,1094031034&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=2763645735,2016465681&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3908717,2002330211&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=318887420,2894941323&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=1063451194,1129125124&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3691080281,11347921&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=2374506090,1216769752&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=1285847167,3193778276&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3251197759,2520670799&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=602106375,407124525&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=2906406936,2666005453&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3124693600,356058981&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3646282624,1156077026&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=4158958181,280757487&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=2371362259,3988640650&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=1423490396,3473826719&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3094554900,3238926176&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=2708276792,219516514&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=938052523,709452322&fm=193&f=GIF',
          'https://t7.baidu.com/it/u=3796392429,3515260353&fm=193&f=GIF',
      ],
      showImageUrl:'https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF',
      timer:null,
      showIndex:0,
    }
  },
  created() {

  },
  mounted() {
    this.ctx = this.getCurrentContext();
    let image = new Image();
    image.onload = () => {
      this.ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, this.canvasW, this.canvasH);
    };
    image.src = this.showImageUrl;

    this.play();
  },
  unmounted() {
    clearInterval(this.timer);
  },
  methods:{

    /**
     * 播放
     */
    play() {
      let { showIndex, imageList } = this;
      this.timer = setInterval(() => {
        showIndex += 1;
        if (showIndex >= imageList.length) {
          showIndex = 0;
        }
        this.showImageUrl = imageList[showIndex];
        this.drawImage();
      }, 1000 / 2);
    },

    /**
     * 在canvas上绘制图片
     */
    drawImage() {
      this.ctx = this.getCurrentContext();
      let image = new Image();
      image.onload = () => {
        this.ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, this.canvasW, this.canvasH);
      };
      image.src = this.showImageUrl;
    },

    /**
     * 清除画布内容
     */
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.canvasW, this.canvasH);
    },

    /**
     * 获取当前画布
     * @returns {HTMLElement}
     */
    getCurrentCanvas() {
      let canvas = document.getElementById('myCanvas');
      return canvas;
    },

    /**
     * 获取当前上下文
     * @returns {*}
     */
    getCurrentContext() {
      let canvas = document.getElementById('myCanvas');
      if (!canvas.getContext) return;
      let ctx = canvas.getContext('2d');
      return ctx;
    },
  }
}
</script>

<style lang="scss" scoped>
.canvas {
  border: 1px solid #ededed;
}
</style>
